window.onload = function () {
    var otb = document.getElementById('otable');
    var obt = document.getElementById('yes');
    var oTxt = document.getElementById('toDoSomething');
    var atn = document.getElementById('oAll');
    var btn = document.getElementById('oFinish');
    var ctn = document.getElementById('oDoing');

    obt.onclick = function () {
       var otr = document.createElement('tr');

       if(oTxt.value === ''){
           alert('你得输入内容才行啊！');
       }else{
           var otd = document.createElement('td');
           otd.innerHTML = oTxt.value;
           otr.appendChild(otd);                                        //创建新节点，塞进了它爸爸的肚子里

           var atd = document.createElement('td');
           atd.innerHTML = '<img src="../del.jpg">';
           otr.appendChild(atd);                                        //创建了新节点，塞进了它爸爸肚子里（和刚才那个节点同父！异母？？）

           atd.getElementsByTagName('img')[0].onclick = function () {
               otb.tBodies[0].removeChild(this.parentNode.parentNode);  //移除tBodies的子节点的爷爷节点，即为tr
           };
           if(otb.tBodies[0].rows.length>0){                            //如果tBodies的行数的大于1,即除过初始行还有多余行就·····
               otb.tBodies[0].insertBefore(otr,otb.tBodies[0].rows[1]); //就从第二行(rows[1])前面插入新的节点
           }else {
               otb.appendChild(otr);                                    //如果只有初始行，就立马造反把创建新的节点放在这（这么做个判断，其实是为了保证IE6-8这种傲娇的浏览器不兼容）
           }

           oTxt.value = '';                                             //一次添加后把输入框的内容清空
       }

        for(var i = 1;i<otb.tBodies[0].rows.length;i++){                //做一个循环给所有生成的子节点加上onclick事件
            otb.tBodies[0].rows[i].cells[0].style.cursor = 'pointer';   //使除过第一行所有行的鼠标样式显示可点击
            otb.tBodies[0].rows[i].cells[0].style.color = 'black';
            otb.tBodies[0].rows[i].onclick = function () {              //准确的说：给tBodies的所有行加上一个事件
                if(this.cells[0].style.opacity==='1'){                   //准确的说：给上述情况（this）的第一列加上事件，判断它是否为正常的
                    this.cells[0].style.color = 'red';
                    this.cells[0].style.opacity = '0.4';                //正常的话，点一下就变不正常了
                    this.cells[0].style.textDecoration = 'line-through';
                }else {                                                 //不正常的话，点一下它就变正常了
                    this.cells[0].style.color = 'black';
                    this.cells[0].style.opacity = '1';
                    this.cells[0].style.textDecoration = 'none';
                }
            }
        }
    };
                                                                         //显示不同状态的内容
    atn.onclick = function () {
        var showAll = document.getElementsByTagName('td');
        for (var i = 0;i<showAll.length;i++){
            showAll[i].style.visibility = 'visible';
        }
    };

    btn.onclick = function () {
        var finish = document.getElementsByTagName('td');
        for (var i = 1;i<finish.length;i++){
            if(finish[i].style.color === 'black'){
                finish[i].style.visibility = 'hidden';
            }else {
                finish[i].style.visibility = 'visible';
            }
        }
    };

    ctn.onclick = function () {
        var finish = document.getElementsByTagName('td');
        for (var i = 1;i<finish.length;i++){
            if(finish[i].style.color === 'red'){
                finish[i].style.visibility = 'hidden';
            }else {
                finish[i].style.visibility = 'visible';
            }
        }
    };
};